<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>交通轨迹</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script include="mapv" src="./static/libs/include-cesium-local.js"></script>
    <!--引用示例页面样式表-->
    <link rel="stylesheet" href="./static/demo/cesium/style.css" />
  </head>

  <body>
    <div id="GlobeView"></div>
    <script>
      var webGlobe = new Cesium.WebSceneControl("GlobeView", {
        terrainExaggeration: 1,
      });
      var blueImage = new Cesium.UrlTemplateImageryProvider({
        url:
          "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
        tilingScheme: new Cesium.WebMercatorTilingScheme(),
        maximumLevel: 12,
      });
      webGlobe.viewer.imageryLayers.addImageryProvider(blueImage);
      var map = webGlobe.viewer;

      initMap();
      initMapv();

      function initMap() {
        var center = Cesium.Cartesian3.fromDegrees(106.553587, 29.57837677, 50000.0);
        map.scene.camera.setView({
            destination: center,
        });
      }

      function initMapv() {
        $.get("./static/data/mapv/car.csv", function(csvstr) {
          // 设置对应的参数
          // https://github.com/huiyan-fe/mapv/blob/master/API.md
          var options = {
            context: "2d", //cesium必须设置画布为2d
            strokeStyle: "rgba(50, 50, 255, 0.8)",
            lineWidth: 0.05,
            globalCompositeOperation: "lighter",
            draw: "simple",
          };
          var dataSet = mapv.csv.getDataSet(csvstr);
          // 声明cesium的mapv图层并将其显示到三维球上
          new CesiumZondy.Overlayer.MapvLayer(map, dataSet, options);
        });
      }
    </script>
  </body>
</html>
